import { Outlet } from "react-router-dom";
import { TabBar } from "antd-mobile";
import { useNavigate, useLocation } from "react-router-dom";
import {
  AppOutline,
  TruckOutline,
  UnorderedListOutline,
  UserOutline,
} from "antd-mobile-icons";
import "./Layout.scss";

const tabs1 = [
  { to: "/", label: "首页", icon: <AppOutline /> },
  { to: "/category", label: "分类", icon: <UnorderedListOutline /> },
  { to: "/cart", label: "购物车", icon: <TruckOutline /> },
  { to: "/mine", label: "我的", icon: <UserOutline /> },
];

export default function Layout() {
  const navigate = useNavigate();

  const location = useLocation();

  const setRouteActive = (value: string) => {
    navigate(value);
  };
  return (
    <div className="flex flex-col h-screen bg-gray-50">
      {/* 页面主体 */}
      <div className="flex-1 overflow-y-auto">
        <Outlet></Outlet>
      </div>
      {/* 底部导航栏 */}

      <TabBar
        className="bg-white"
        activeKey={location.pathname}
        onChange={(value) => setRouteActive(value)}
      >
        {tabs1.map((tab) => {
          return <TabBar.Item key={tab.to} icon={tab.icon} title={tab.label} />;
        })}
      </TabBar>
    </div>
  );
}
